<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<title>Document</title>
	<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>-->
	<style type="text/css">
		body {
			font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
			color: #666;
		}
		del{ color: #aaa;}
		.media-heading{margin: 5px 0 20px;}
		.col{
			padding: 20px;
		}
		.tab2{
			background-color: #eee;
			padding: 40px;
		}
		.tab2 img{
			max-width: 50%;
		}
		.tab2-2,.tab3-2{
			display: inline-block;
			vertical-align: middle;
		}
		.tab3{
			padding: 40px;
		}
		.tab3 img{
			max-width: 70%;
		}
		.footer{
			padding: 20px;
			background-color: #ccc;
		}
		.navbar-brand{
			padding-top: 0;
		}
		
	</style>
</head>
<body>
	<!--首页导航条-->
	<div class="navbar navbar-default navbar-fixed-top" style="margin-bottom: 1px;">
		<div class="container">
			<div class="navbar-header">
				<!--一般品牌logo会是一张图片.我们可以在下面a标签中放一个img标签.记得把a标签加个padding:0;不然图片不居中.
					
				-->
				<a class="navbar-brand" href="#"><img src="img/kpit2.png"/></a>
				<!--这个按扭后会智能显示:class="navbar-toggle",让要记得把下面折叠菜单关联起来 -->
				<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
					<!-- 让按扭有三条横线,好看些 -->
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse" id="navbar-collapse">
				<!--下拉时有一点点空隙,把UL的margin-top设为0就可以了.-->
				<ul class="nav navbar-nav navbar-right" style="margin-top: 0;">
					<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;首页</a></li>
					<li><a href="news.html"><span class="glyphicon glyphicon-list"></span>&nbsp;资讯</a></li>
					<li><a href="case.html"><span class="glyphicon glyphicon-fire"></span>&nbsp;案例</a></li>
					<li><a href="about.html"><span class="glyphicon glyphicon-question-sign"></span>&nbsp;关于</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 
		
	轮播器:
		基本构成:一个大DIV.carousel.slide,给个ID值,里面一个OL>LI + DIV>DIV*3>IMG + A*2
		1.图片大容器div.carousel-inner,小容器div.item,第一个active
		2.把ol.carousel-indicators,里面每个li:data-target="#myCarousel"进行绑定, data-slide-to="0",排下顺序,第一个class="active"
		3.把最2个a标签设置下,class="carousel-control left | right" data-slide="prev | next" href="#myCarousel",里面放个span:<span class="glyphicon glyphicon-chevron-right"></span>,它能自动识别这两图标
		4.它不会自动播放,我们需写个Jq代码.$('#myCarousel').carousel({interval:2000});
		*.题外话:如果图片小了,会出现白边,这时需限定一下总容器宽度,如:style="width: 500px;",或把图片处理下居中style="margin: 0 auto;",然后给父DIV设个背景色.
	 -->
	<div id="myCarousel" class="carousel slide" style="margin-top:50px;">
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
			<li data-target="#myCarousel" data-slide-to="3"></li>
			<li data-target="#myCarousel" data-slide-to=42"></li>
			
		</ol>
		<div class="carousel-inner">
			<div class="item active" style="background-color: #1F253D;"><img class="center-block" src="img/ad.jpg" alt="" /></div>
			<div class="item" style="background-color: #FFC1C2;"><img style="margin: 0 auto;" src="img/ad1.jpg" alt="" /></div>
			<div class="item" style="background-color: #F6F6F6;"><img style="margin: 0 auto;" src="img/ad2.jpg" alt="" /></div>
			<div class="item" style="background-color: #85BBE9;"><img style="margin: 0 auto;" src="img/ad3.jpg" alt="" /></div>
			<div class="item" style="background-color: #8FC400;"><img style="margin: 0 auto;" src="img/ad4.jpg" alt="" /></div>
		</div>
		<a class="carousel-control left" data-slide="prev" href="#myCarousel">
			<span class="glyphicon glyphicon-chevron-left"></span>
		</a>
		<a class="carousel-control right" data-slide="next" href="#myCarousel">
			<span class="glyphicon glyphicon-chevron-right"></span>
		</a>
	</div>
	
		
	<!--实现中间内容-->
	<div class="tab1">
		<div class="container">
			<h2 class="text-info text-center">为什么选择鲲鹏学校学习</h2>
			<p class="text-muted text-center">强大的师资力量，完美的实战型管理课程，让您的前程实现质的腾飞！</p>
			<div class="row">
				
				<div class="col-md-6 col">
					<div class="media">
						<!--媒体左边是图片-->
						<div class="media-left">
							<!--img加上class="media-object"防止错位-->
							<a href=""><img class="media-object" src="img/tab1-1.png"/></a>
						</div>
						<div class="media-body">
							<h4 class="media-heading">课程内容</h4>
							<p class="text-muted"><del>其他：不知名的讲师编写，没有任何实战价值的教材！</del></p>
							<p>我们：知名企业家、IT学大师联合编写的具有实现性教材！</p>
						</div>
					</div>
				</div>
				<div class="col-md-6 col">
					<div class="media">
						<!--媒体左边是图片-->
						<div class="media-left">
							<!--img加上class="media-object"防止错位-->
							<a href=""><img class="media-object" src="img/tab1-2.png"/></a>
						</div>
						<div class="media-body">
							<h4 class="media-heading">师资力量</h4>
							<p class="text-muted"><del>其他：正牌大学毕业的、业界没有实际开发经验的讲师！</del></p>
							<p>我们：美国哈佛、耶鲁等世界一流高校、实战经验丰富的名牌专家！</p>
						</div>
					</div>
				</div>
				<div class="col-md-6 col">
					<div class="media">
						<!--媒体左边是图片-->
						<div class="media-left">
							<!--img加上class="media-object"防止错位-->
							<a href=""><img class="media-object" src="img/tab1-3.png"/></a>
						</div>
						<div class="media-body">
							<h4 class="media-heading">课时安排</h4>
							<p class="text-muted"><del>其他：无法保证上课效率、没有时间表，任务无法完成！</del></p>
							<p>我们：保证按时间表的上课、效率高、当天的任务当天完成！</p>
						</div>
					</div>
				</div>				
				<div class="col-md-6 col">
					<div class="media">
						<!--媒体左边是图片-->
						<div class="media-left">
							<!--img加上class="media-object"防止错位-->
							<a href=""><img class="media-object" src="img/tab1-4.png"/></a>
						</div>
						<div class="media-body">
							<h4 class="media-heading">服务团队</h4>
							<p class="text-muted"><del>其他：社会招聘的、服务水平参差不齐的普通员工！</del></p>
							<p>我们：内部培养、经受过良好高端服务培训的高标准工程师！</p>
						</div>
					</div>
				</div>	
				
			</div>
		</div>
		<div class="row tab2">
			<div class="col-sm-6 col-xs-12 tab2-2 pull-right">
				<img class="center-block img-responsive" src="img/tab2.png"/>
			</div>
			<div class="col-sm-6 col-xs-12 tab2-2 pull-left">
				<h3 class="text-center">强大的教学体系</h3>
				<p class="text-center">经过严格管理层层把关、让您小孩成绩突飞猛进</p>
				<p class="text-center">边教、边学边练,让电脑技能快速突破</p>
				<p class="text-center">每天4-7节专业课,全程老师指点</p>
				<p class="text-center">每周两节素质教育,快速培养学生综合素质</p>
			</div>
		</div>
		
		<div class="row tab3">
			<div class="col-sm-6 col-xs-12 tab3-2">
				<img class="center-block img-responsive" src="img/tab3.png"/>
			</div>
			<div class="col-sm-6 col-xs-12 tab3-2">
				<h3 class="text-center">完美的管理方式</h3>
				<p class="text-center">让学生参于管理,...</p>
				<p class="text-center">班主任每天全程跟班,...</p>
				<p class="text-center">课堂手机上交,让...</p>
				<p class="text-center">每天定时查寝,...</p>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="container">
			<p class="text-center">招生计划 | 合作事宜 | 投诉建议</p>
			<p class="text-center">湘ICP 备00000000号  &copy; 2015-2018 XX官方网站. Powered by Bootstrap.</p>
			
		</div>
		
	</div>
	<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$('#myCarousel').carousel({interval:2000});
	</script>
</body>
</html>